<!--
 * @author  dumeng
-->
<template>
  <section class="select-union">
    <section class="main-close" @click="()=>{$router.back()}">
      <img src="./images/closeLogin.png" alt/>
    </section>
    <section class="page-title">
      <p class="title">您在多个工会有账号</p>
      <p class="sub-title">请选择要进入的工会</p>
    </section>
    <ul class="page-container">
      <li v-for="item in unionList" :key="item.name" @click="handleClick(item)" :class="[item.systemUrl1 === active && 'active']">
        <span>{{item.enterpriseName}}</span>
        <img class="more" :src="item.systemUrl1 === active ? require('./images/more-active.png') : require('./images/more.png')" alt="">
      </li>
    </ul>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SelectUnion',
  data() {
    return {
      active: ''
    }
  },
  computed: {
    ...mapGetters([
      'unionList'
    ])
  },
  methods: {
    handleClick(item) {
      this.active = item.systemUrl1
      location.replace(item.systemUrl1 + '&logoutRedirectUrl=' + location.href)
    }
  }
}
</script>

<style scoped lang="scss">
  .select-union{
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #eff0f4 0%, #f2f3f6 100%);
    position: relative;
    .main-close {
      height: $headerHeight;
      img {
        width: rem(32);
        height: rem(32);
        margin: rem(28) 0 rem(28) rem(30);
      }
    }
    .page-title {
      .title {
        font-size: rem(44);
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-left: rem(69);
      }
      .sub-title {
        font-size: rem(26);
        font-weight: 400;
        margin-top: rem(14);
        color: rgba(165, 165, 165, 1);
        margin-left: rem(69);
      }
    }
    .page-container{
      position: absolute;
      top: rem(250);
      bottom: rem(50);
      left: 0;
      right: 0;
      padding: 0 rem(50);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: rem(118);
        background-color: #fff;
        border-radius: rem(120);
        padding: 0 rem(35);
        border: 1px solid #fff;
        margin-bottom: rem(40);
        font-size: rem(32);
        font-weight: bold;
        &.active{
          background: #fff1ef;
          border: 1px solid #eb523c;
        }
        .logo{
          width: rem(404);
          height: rem(56);
        }
        .more{
          width: rem(13);
          height: rem(22);
        }
        &>section {
          display: flex;
          align-items: center;

        }
      }
    }
  }
</style>
